<template>
	<view class="container">
		<loading v-if="loading" class="loading"></loading>
		<view class="sku-search">
			<input class="search-input" @blur="onSearchBlur" placeholder="输入商品名搜索" />
			<block v-if="searchResultList.length <= 0">
				<view class="search-button" @click="onSearchClick">搜索</view>
			</block>
			<block v-else>
				<view class="search-button" @click="onSearchCancel">取消搜索</view>
			</block>
		</view>
		<block v-if="searchResultList.length <=0">
			<scroll-view scroll-y="true" :style="{height: scrollH + 'px'}">
				<view>
					<view class="sku-item" v-for="(item, index) in skuList" @key="index"
						:class="{selected: item.selected}" @click="selectSku(index, item)">
						<view class="sku-inner">
							<view class="sku-left">
								<block v-if="item.selected">
									<uni-icons type="checkbox" size="30"></uni-icons>
								</block>
								<block v-else>
									<uni-icons type="circle" size="30"></uni-icons>
								</block>
							</view>
							<view class="sku-right">
								<view>{{item.item_name}}</view>
								<view class="item-mini">{{item.sku_name}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</block>
		<block v-else>
			<scroll-view scroll-y="true" :style="{height: scrollH + 'px'}">
				<view>
					<view class="sku-item" v-for="(item, index) in searchResultList" @key="index">
						<view class="sku-inner">
							<view class="sku-left">
								<block v-if="item.selected">
									<uni-icons type="checkbox" size="30"></uni-icons>
								</block>
								<block v-else>
									<uni-icons type="circle" size="30"></uni-icons>
								</block>
							</view>
							<view class="sku-right">
								<view>{{item.item_name}}</view>
								<view class="item-mini">{{item.sku_name}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</block>
		<block v-if="hasSelected">
			<view class="button-box" @click="confirmSelectSku">确&nbsp;&nbsp;&nbsp;&nbsp;定</view>
		</block>
		<block v-else>
			<view class="button-box disabled">确&nbsp;&nbsp;&nbsp;&nbsp;定</view>
		</block>
	</view>
</template>

<script>
	import loading from '@/components/littleu-loading/loading.vue'
	import {
		Item
	} from '@/models/item.js'
	const itemModel = new Item()
	const app = getApp()
	export default {
		components: {
			loading
		},
		data() {
			return {
				page: 1,
				count: 20,
				keyword: '',
				skuList: [],
				loading: false,
				loadingEnd: false,
				searchResultList: [],
				scrollH: app.globalData.windowHeight - 40,
				hasSelected: false,
				selectedSku: null
			}
		},
		methods: {
			_loadData() {
				const submitData = {
					page: this.page,
					count: this.count
				}
				this.loading = true
				itemModel.getSkuPaging(submitData, (res) => {
					if (res.items.length > 0) {
						const items = res.items
						items.forEach(item => {
							item.selected = false
						})
						this.skuList = items
						this.page += 1
						this.loading = false
						this.loadingEnd = false
					} else {
						this.loadingEnd = true
					}
				})
			},
			_getMore() {
				const submitData = {
					page: this.page,
					count: this.count
				}
				this.loading = true
				itemModel.getSkuPaging(submitData, (res) => {
					if (res.items.length > 0) {
						this.skuList = this.skuList.concat(res.items)
						this.page += 1
						this.loading = false
						this.loadingEnd = false
					} else {
						this.loadingEnd = true
					}
				})
			},
			onSearchBlur(e) {
				this.keyword = e.detail.value

			},
			onSearchClick() {
				if (this.keyword == '') {
					uni.showToast({
						title: '请输入搜索内容',
						icon: 'none',
						duration: 2000
					})
					return
				}
				const submitData = {
					item_name: this.keyword
				}

				itemModel.getSkuByCondition(submitData, (res) => {
					const tmpData = res
					if (tmpData.length == 0) {
						uni.showToast({
							icon: 'none',
							title: '无搜索结果',
							duration: 3000
						})
					} else {
						this.searchResultList = tmpData
						this.loadingEnd = true
					}
				})
			},
			onMemberSearchCancel() {
				this.searchResultList = []
			},
			selectSku(index, item) {
				for (let i = 0; i < this.skuList.length; i++) {
					if (i == index) {
						this.skuList[i].selected = true
					} else {
						this.skuList[i].selected = false
					}
				}
				this.hasSelected = true
				this.selectedSku = item
			},
			confirmSelectSku(){
				uni.$emit('returnData', this.selectedSku)
				uni.navigateBack({})
			}
		},
		onLoad(options) {
			this._loadData()
		},
		onReachBottom() {
			if (!this.loadingEnd) {
				this._getMore()
			}
		},
	}
</script>

<style lang="scss">
	.loading {
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 999;
	}

	.sku-search {
		width: 96%;
		margin: 20rpx auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.search-input {
		width: 80%;
		padding: 6rpx;
		border-bottom: #333 2rpx solid;
	}

	.sku-item {
		width: 100%;
		height: 140rpx;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #e9e9e9;
		background-color: #fff;
	}

	.sku-inner {
		width: 96%;
		margin: 10rpx auto;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.sku-left {
		margin-right: 20rpx;
	}

	.sku-right {
		display: flex;
		flex-direction: column;
		line-height: 40rpx;
	}

	.selected {
		background-color: $uni-color-primary;
		color: #fff;
	}

	.item-mini {
		font-size: 24rpx;
		color: #666
	}
	.button-box{
		width: 600rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin: 20rpx auto;
		text-align: center;
		background-color: $uni-color-primary;
		border-radius: 30rpx;
		color: #fff;
	}
	.disabled{
		background-color: #ccc;
		color: #333;
	}
</style>